<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .luck-draw{
            width: 80%;
            margin: 0 auto;
        }
        h2{
            line-height: 60px;
        }
        #btn{
            margin-top: 16px;
            display: block;
            height: 32px;
            border-radius: 5px;
            background: #28f;
            border: none;
            color: #fff;
            padding-left: 8px;
            padding-right: 8px;
        }
    </style>
</head>
<body>
    <div class="luck-draw">
        <h2>Promise初体验</h2>
        <hr/>
        <input id="btn" type="button" value="点击抽奖">
    </div>
    <script>
        //生成随机数
        function rand(m,n) {
            //Math.ceil()向上取整
            return Math.ceil(Math.random() * (n-m+1)) + m-1;
        }
        const btn = document.querySelector("#btn")
        btn.addEventListener("click", function(){
            /*方法一：使用定时器*/
            // setTimeout(() => {
            //     let n = rand(1,100)
            //     if ( n <= 30 ){
            //         alert("恭喜中奖了，中将概率30%")
            //     } else {
            //         alert("未中奖，再接再厉")
            //     }
            // },1000)
            
            /*方法二：使用promise*/
            //promise可以包裹异步任务
            const P = new Promise((resolve, reject) => {
                setTimeout(() => {
                    let n = rand(1,100)
                    if ( n <= 30 ){
                        //成功时调用resolve，并将promise对象的状态设置为成功 [成功]
                        resolve(n);
                    } else {
                        //失败时调用reject，并将promise对象的状态设置为失败 [失败]
                        reject(n);
                    }
                },1000)
            });
            //封装完成后使用then方法
            /*then方法接收两个函数类型的参数
              1.第一个参数是，promise对象成功时的回调函数
              2.第二个参数是，promise对象失败是的回调函数
            */
            P.then((value) => {
                alert("恭喜中奖了,中间的号码为" + value);
            }, (reason) => {
                alert("未中奖，再接再厉，您的号码为" + reason);
            });
            
        })
    </script>
</body>
</html>